<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>智慧工地大屏系统</title>
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" href="./css/head.css">
		<link rel="stylesheet" href="./css/index2.css">
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="wrap" id="wrap">
			<!-- header start -->
			<div class="header">
				<div class="time">
					<span id="time"></span>
				</div>
				<div class="login">
					用户1234234
				</div>
			</div>
			<!-- header end -->
			<!-- main start -->
			<div class="main clearfix w-m">
				<!-- 导航 -->				
				<div class="wrap clearfix">
					<div class="clearfix">
						<!-- 左边 -->
						<div class="leftDiv fl">
							<div class="box box1">
								<div class="title clearfix">
									<p>
										<img src="img/page2/tit2.png" alt="">
										实时数据
									</p>									
								</div>
								<div class="content">
									<div class="filter">
										<span>设备名称</span>
										<select name="" id="filter">
											<option value="0">1#升降机</option>
											<option value="1">3#升降机</option>
										</select>
									</div>
									<div class="inner clearfix"> 
										<div class="inner_left fl">
											<div class="item">
												<p>当前高度</p>
												<p><span id="gaodu">2</span>m</p>
											</div>											
											<div class="item">
												<p>载人数</p>
												<p><span id="num">0</span></p>
											</div>
											<div class="item">
												<p>前门锁状态</p>
												<p><span id="frontend">关闭</span></p>
											</div>
											<div class="item">
												<p>后门锁状态</p>
												<p><span id="backend">关闭</span></p>
											</div>
										</div>
										<div class="inner_right fl">
											<img src="img/page2/ta2-1.png" alt="">
											<div class="ta1">
												<img src="img/page2/ta2-2.png" id="ta1" style="bottom:0%;">
											</div>
											<div class="ta2">
												<img src="img/page2/ta2-3.png" id="ta2" style="bottom:0%;">
											</div>
											<div class="data data1">
												<div class="img fl">
													<img src="img/page2/icon2-1.png" alt="">
												</div>
												<div class="text fl">
													<p>重量</p>
													<p><span id="havent">80</span>t</p>
												</div>
											</div>
											<img src="img/page2/line2-1.png" alt="" class="line1">
											<div class="data data2">
												<div class="img fl">
													<img src="img/page2/icon2-2.png" alt="">
												</div>
												<div class="text fl">
													<p>高度</p>
													<p><span id="height">80</span>m</p>
												</div>
											</div>
											<img src="img/page2/line2-1.png" alt="" class="line2">
											<div class="data data3">
												<div class="img fl">
													<img src="img/page2/icon2-3.png" alt="">
												</div>
												<div class="text fl">
													<p>速度</p>
													<p><span id="speed">80</span>m/s</p>
												</div>
											</div>
											<img src="img/page2/line2-2.png" alt="" class="line3">
											<div class="data data4">
												<div class="img fl">
													<img src="img/page2/icon2-4.png" alt="">
												</div>
												<div class="text fl">
													<p>倾角</p>
													<p><span id="qingjiao">80</span>°</p>
												</div>
											</div>
											<img src="img/page2/line2-2.png" alt="" class="line4">
										</div>
									</div>
								</div>
							</div>
							<div class="box box2 clearfix">
								<div class="title clearfix">
									<p>
										<img src="img/page2/tit3.png" alt="">
										统计分析
									</p>									
								</div>
								<div class="clearfix">
									<div class="filter fr">
										<span class="active">升降机1</span>
										<span>升降机2</span>
									</div>
								</div>
								
								<div id="line" style="width: 100%;height: 280px;"></div>
							</div>
							
						</div>
						<!-- 右边 -->
						<div class="rightDiv fl">
							<div class="box box1">
								<div class="title clearfix">
									<p>
										<img src="img/page2/tit4.png" alt="">
										运行状态
									</p>	
									<p><a href="#">更多</a></p>
								</div>
								<div class="content">
									<div class="top clearfix">
										<div class="avatar"><img src="img/page2/tx.jpg" alt=""></div>
										<div class="info clearfix">
											<p>姓名：<span id="name">王德伟</span></p>
											<p>性别：<span id="sex">男</span></p>
											<p>年龄：<span id="age">36</span></p>
											<p>电话：<span id="tel">13423546421</span></p>
											<p class="long">身份证号：<span id="idCard">24546745374356346</span></p>
										</div>
									</div>
									<ul class="clearfix">
										<li>
											<img src="img/page2/s2-1.png" alt="">
											<span>工作时长</span>
											<span><font id="workTime">0</font>min</span>
										</li>
										<li>
											<img src="img/page2/s2-2.png" alt="">
											<span>今日载重</span>
											<span><font id="zaizhong">0</font>t</span>
										</li>
										<li>
											<img src="img/page2/s2-3.png" alt="">
											<span>今日运转</span>
											<span><font id="yunzhuan">0</font>次</span>
										</li>
										<li>
											<img src="img/page2/s2-4.png" alt="">
											<span>今日报警</span>
											<span><font id="baojing">0</font>次</span>
										</li>
										<li>
											<img src="img/page2/s2-5.png" alt="">
											<span>今日功率</span>
											<span><font id="gonglv">0</font>t/min</span>
										</li>
									</ul>
								</div>
							</div>
							
							<div class="box box2">
								<div class="title clearfix">
									<p>
										<img src="img/page2/tit5.png" alt="">
										设备信息
									</p>									
								</div>
								<div class="content">
									<ul class="clearfix">
										<li class="clearfix">
											<div class="img fl"><img src="img/page2/pic1.png" alt=""></div>
											<div class="txt fl">
												<p>设备名称</p>
												<p id="eqNmae">3#升降机</p>
											</div>
										</li>
										<li class="clearfix">
											<div class="img fl"><img src="img/page2/pic2.png" alt=""></div>
											<div class="txt fl">
												<p>设备编号</p>
												<p id="eqNum">3#升降机</p>
											</div>
										</li>
										<li class="clearfix">
											<div class="img fl"><img src="img/page2/pic3.png" alt=""></div>
											<div class="txt fl">
												<p>额定重量</p>
												<p id="edHavent">3#升降机</p>
											</div>
										</li>
										<li class="clearfix">
											<div class="img fl"><img src="img/page2/pic4.png" alt=""></div>
											<div class="txt fl">
												<p>基本高度</p>
												<p id="eqGaodu">3#升降机</p>
											</div>
										</li>
										<li class="clearfix">
											<div class="img fl"><img src="img/page2/pic5.png" alt=""></div>
											<div class="txt fl">
												<p>起升速度</p>
												<p id="eqSpeed">3#升降机</p>
											</div>
										</li>
										<li class="clearfix">
											<div class="img fl"><img src="img/page2/pic6.png" alt=""></div>
											<div class="txt fl">
												<p>额定载人数</p>
												<p id="renshu">3#升降机</p>
											</div>
										</li>
										<li class="clearfix">
											<div class="img fl"><img src="img/page2/pic7.png" alt=""></div>
											<div class="txt fl">
												<p>吊笼尺寸</p>
												<p id="size">3#升降机</p>
											</div>
										</li>
										<li class="clearfix">
											<div class="img fl"><img src="img/page2/pic8.png" alt=""></div>
											<div class="txt fl">
												<p>最大起升高度</p>
												<p id="maxHeight">3#升降机</p>
											</div>
										</li>
									</ul>
									<div class="nav">
										<span><a href="javascript:;">工作循环记录</a></span>
										<span><a href="javascript:;">工作循环记录</a></span>
										<span><a href="javascript:;">报警历史记录</a></span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
			</div>
			<!-- main end -->
		</div>
		<div class="tan">
			<div class="mask"></div>
			<div class="inner">
				<div class="close"><img src="img/page2/close.png" ></div>
				<div class="title">工作循环记录</div>
				<div class="content">
					<div class="thead">
						<span class="s1">序号</span>
						<span class="s2">考勤照片</span>
						<span class="s3">人员姓名</span>
						<span class="s4">性别</span>
						<span class="s5">年龄</span>
						<span class="s6">工种</span>
						<span class="s7">劳务队</span>
						<span class="s8">出勤日期</span>
						<span class="s9">出勤天数</span>
					</div>
					<div class="tbody">
						<ul id="tanList">
							<li>
								<span class="s1">1</span>
								<span class="s2"><img src="img/page2/tx.jpg" ></span>
								<span class="s3">陈尤其</span>
								<span class="s4">男</span>
								<span class="s5">39</span>
								<span class="s6">普工</span>
								<span class="s7">安徽河达</span>
								<span class="s8">2023-11-29 13:58:09</span>
								<span class="s9">2</span>
							</li>
							<li>
								<span class="s1">1</span>
								<span class="s2"><img src="img/page2/tx.jpg" ></span>
								<span class="s3">陈尤其</span>
								<span class="s4">男</span>
								<span class="s5">39</span>
								<span class="s6">普工</span>
								<span class="s7">安徽河达</span>
								<span class="s8">2023-11-29 13:58:09</span>
								<span class="s9">2</span>
							</li>
							<li>
								<span class="s1">1</span>
								<span class="s2"><img src="img/page2/tx.jpg" ></span>
								<span class="s3">陈尤其</span>
								<span class="s4">男</span>
								<span class="s5">39</span>
								<span class="s6">普工</span>
								<span class="s7">安徽河达</span>
								<span class="s8">2023-11-29 13:58:09</span>
								<span class="s9">2</span>
							</li>
							<li>
								<span class="s1">1</span>
								<span class="s2"><img src="img/page2/tx.jpg" ></span>
								<span class="s3">陈尤其</span>
								<span class="s4">男</span>
								<span class="s5">39</span>
								<span class="s6">普工</span>
								<span class="s7">安徽河达</span>
								<span class="s8">2023-11-29 13:58:09</span>
								<span class="s9">2</span>
							</li>
							<li>
								<span class="s1">1</span>
								<span class="s2"><img src="img/page2/tx.jpg" ></span>
								<span class="s3">陈尤其</span>
								<span class="s4">男</span>
								<span class="s5">39</span>
								<span class="s6">普工</span>
								<span class="s7">安徽河达</span>
								<span class="s8">2023-11-29 13:58:09</span>
								<span class="s9">2</span>
							</li>
						</ul>
						
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/data2.js"></script>
<script type="text/javascript" src="js/index2.js"></script>
<script type="text/javascript">
	function setRem() {
	 let vW = window.innerWidth / 1920;
		let vH = window.innerHeight / 1080;
		document.getElementById('wrap').style.transform = "scale(" + vW + "," + vH + ")"
	}
	setRem();
	window.onresize = function() {
		setRem()
	};
	formDate('time')
	
	init(datas[0])
	$('#filter').change(function(){
		init(datas[$('#filter').val()])
	})
	$('.filter span').click(function(){
		$(this).addClass('active').siblings().removeClass('active')
		line(datas[$(this).index()].data2, 'line')
	})
	$('.nav span').click(function(){
		var title=$(this).text()
		var list=tanData[$(this).index()]
		$('#tanList').html('')
		$('.tan title').text(title)
		list.forEach(item=>{
			$('#tanList').append(`
				<li>
					<span class="s1">${item.id}</span>
					<span class="s2"><img src="${item.avatar}" ></span>
					<span class="s3">${item.name}</span>
					<span class="s4">${item.sex}</span>
					<span class="s5">${item.age}</span>
					<span class="s6">${item.job}</span>
					<span class="s7">${item.team}</span>
					<span class="s8">${item.date}</span>
					<span class="s9">${item.days}</span>
				</li>
			`)
		})
		$('.tan').show()
	})
	$('.close').click(function(){
		$('.tan').hide()
	})
	// 定时刷新
	setInterval(()=>{
		var index=parseInt( Math.random()*2)
		init(datas[index])
	},60*1000)
</script>
